import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

export default function ButtonGroup(props) {

    const selectedStyle = {
        backgroundColor: props.selectedBackgroundColor
    }

    return <View style={[props.containerStyle, { flexDirection: 'row', alignItems: 'center' }]}>
        {props.buttons.map((button, i) => {
            const isSelected = props.selectedIndex === i
            // const isDisabled =
            //     disabled === true ||
            //     (Array.isArray(disabled) && disabled.includes(i));

            return <TouchableOpacity
                key={button.toString()}
                style={[props.buttonStyle,
                { borderRightWidth: 1, borderRightColor: 'gray' },
                props.selectedIndex == i ? selectedStyle : null]}
                onPress={() => {


                    props.onPress(i);

                }}
            >
                <Text style={{ fontSize: 16 }}>{button}</Text>
            </TouchableOpacity>
        })}
    </View>
}